<!-- eslint-disable no-console -->
<template>
  <el-scrollbar :style="height < 850 ? 'height: 100vh; ' : ''">
    <el-row :style="{ 'min-width': 1500 + 'px', height: 72 + 'px' }">
      <div class="top">
        <!-- 顶部 -->
        <div class="top-box">
          <div>
            <img class="top-img" src="@/assets/Logo.png" alt="" />
          </div>
        </div>
      </div>
    </el-row>
    <el-row class="back" style="min-height: 850px; min-width: 1000px">
      <div
        :style="{
          width: '100%',
          position: height < 300 ? 'absolute' : '',
          top: height < 300 ? '35%' : '',
        }"
      >
        <div class="bg-banner" />
        <div id="login-box">
          <div class="login-banner">
            <!-- 左侧图片 -->
            <div class="box-text">
              <div class="login-left-logo-text-msg">新一代媒体信息发布平台</div>
            </div>
            <div class="login-left-logo">
              <div class="login-left-logo-text">
                <div class="login-logo">
                  <div style="margin-top: 30px">
                    <img src="@/assets/Frame.svg" alt="" />
                  </div>
                </div>
              </div>
            </div>
            <div style="float: right">
              <div style="margin: 0 32px">
                <img
                  style="width: 80px; height: 80px"
                  src="../../assets/o3Ifb5E2DP9BcGQru_z5_tyB0qBk.jpg"
                  alt=""
                />
              </div>
              <div style="font-size: 12px; margin: 10px 17px">
                无需下载，扫码体验
              </div>
            </div>
          </div>
          <div class="title-container">
            <h3
              class="title"
              v-if="registerForm.hide"
              style="text-align: center; margin: 20px 20px"
            >
              {{ registerForm.title }}
            </h3>
            <el-tabs v-model="activeName" v-if="registerForm.hide">
              <el-tab-pane label="用户名登录" name="first">
                <el-form
                  ref="loginFormRef"
                  :model="loginForm"
                  :rules="loginRules"
                  class="login-form"
                >
                  <el-form-item prop="account">
                    <el-input
                      v-model="loginForm.account"
                      placeholder="请输入用户名或手机号"
                      text
                      tabindex="1"
                      :name="'random-' + Math.random()"
                      autocomplete
                    >
                      <template #prefix>
                        <el-icon style="margin: 50px 10px; font-size: 24px">
                          <User />
                        </el-icon>
                      </template>
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="password">
                    <el-input
                      v-model="loginForm.password"
                      type="password"
                      placeholder="请输入登录密码"
                      :name="'random-' + Math.random()"
                      minlength="6"
                      maxlength="15"
                      tabindex="2"
                      autocomplete
                      show-password
                      @keyup.enter="handleLogin"
                    >
                      <template #prefix>
                        <el-icon style="margin: 50px 10px; font-size: 24px">
                          <Lock />
                        </el-icon>
                      </template>
                      <template #suffix>
                        <div class="sub-links" @click="forget">忘记密码</div>
                      </template>
                    </el-input>
                  </el-form-item>
                  <el-button
                    :loading="loading"
                    type="primary"
                    size="large"
                    style="width: 100%; margin-top: 20px; height: 48px"
                    @click="login"
                  >
                    登录
                  </el-button>
                  <div class="flex-bar">
                    <div class="sub-link">
                      <span class="text">还没有帐号?</span>
                      <el-link
                        type="primary"
                        :underline="false"
                        @click="btnclick"
                      >
                        立即注册
                      </el-link>
                    </div>
                  </div>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="验证码登录" name="second">
                <el-form
                  ref="resetFormRef"
                  :model="resetForm"
                  :rules="resetRules"
                  class="login-form"
                  auto-complete="on"
                >
                  <div>
                    <el-form-item prop="mobile" style="border-radius: none">
                      <el-input
                        v-model="resetForm.mobile"
                        placeholder="请输入手机号"
                        tabindex="1"
                        autocomplete="off"
                        :name="'random-' + Math.random()"
                      >
                        <template #prefix>
                          <el-icon style="margin: 50px 10px; font-size: 24px">
                            <Iphone />
                          </el-icon>
                        </template>
                      </el-input>
                    </el-form-item>
                    <el-form-item prop="captcha" class="from">
                      <el-input
                        v-model="resetForm.captcha"
                        placeholder="请输入验证码"
                        tabindex="2"
                        autocomplete="off"
                        :name="'random-' + Math.random()"
                      >
                        <template #prefix>
                          <el-icon style="margin: 50px 10px; font-size: 24px">
                            <Message />
                          </el-icon>
                        </template>
                        <template #suffix>
                          <el-button
                            class="login-btn"
                            :disabled="registerForm.show"
                            v-if="!state.countDownIng"
                            style="color: #0daeff; background-color: #fff"
                            @click="countDown"
                          >
                            获取验证码
                          </el-button>
                          <el-button
                            disabled
                            class="time-btn"
                            style="color: #ccc; background-color: #fff"
                            v-if="state.countDownIng"
                            >{{ state.countDownTime }}s</el-button
                          >
                        </template>
                      </el-input>
                    </el-form-item>
                    <el-button
                      :loading="loading"
                      type="primary"
                      size="large"
                      style="width: 100%; margin-top: 20px; height: 48px"
                      @click="notarize"
                    >
                      登录
                    </el-button>

                    <div class="flex-bar">
                      <div class="sub-link">
                        <span class="text">还没有帐号?</span>
                        <el-link
                          type="primary"
                          :underline="false"
                          @click="btnclick"
                        >
                          立即注册
                        </el-link>
                      </div>
                    </div>
                    <div></div>
                  </div>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </div>
          <!-- 注册 -->
          <el-form
            v-if="registerForm.shows"
            ref="ruleFormRef"
            :model="restet"
            :rules="registerRules"
            class="login-form"
            auto-complete="on"
          >
            <div>
              <h3 class="title" style="text-align: center; margin: -20px 20px">
                {{ registerForm.title }}
              </h3>
            </div>

            <div style="margin-top: 20px">
              <el-form-item prop="registerPhone">
                <el-input
                  v-model="restet.registerPhone"
                  placeholder="请输入手机号"
                  tabindex="1"
                  autocomplete="off"
                  :name="'random-' + Math.random()"
                >
                  <template #prefix>
                    <el-icon style="margin: 50px 10px; font-size: 24px">
                      <Iphone />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="verificationCode">
                <el-input
                  v-model="restet.verificationCode"
                  placeholder="请输入验证码"
                  tabindex="2"
                  autocomplete="off"
                  :name="'random-' + Math.random()"
                >
                  <template #prefix>
                    <el-icon style="margin: 50px 10px; font-size: 24px">
                      <Message />
                    </el-icon>
                  </template>
                  <template #suffix>
                    <el-button
                      class="login-btn"
                      :disabled="showe"
                      v-if="!stateRegister.countDownIng"
                      @click="countDownRegister"
                      style="color: #0daeff; background-color: #fff"
                    >
                      获取验证码
                    </el-button>
                    <el-button
                      class="time-btn"
                      style="color: #ccc; background-color: #fff"
                      disabled
                      v-if="stateRegister.countDownIng"
                      >{{ stateRegister.countDownTime }}s</el-button
                    >
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="registerPassword">
                <el-input
                  v-model="restet.registerPassword"
                  type="password"
                  placeholder="密码(最少六位,数字+大小写字母)"
                  tabindex="3"
                  minlength="6"
                  maxlength="15"
                  autocomplete="off"
                  :name="'random-' + Math.random()"
                  show-password
                >
                  <template #prefix>
                    <el-icon style="margin: 50px 10px; font-size: 24px">
                      <Lock />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="notarizePassword">
                <el-input
                  v-model="restet.notarizePassword"
                  type="password"
                  placeholder="确认密码"
                  tabindex="4"
                  minlength="6"
                  maxlength="15"
                  autocomplete="off"
                  :name="'random-' + Math.random()"
                  show-password
                >
                  <template #prefix>
                    <el-icon style="margin: 50px 10px; font-size: 24px">
                      <Lock />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </div>
            <el-button
              :loading="loading"
              type="primary"
              size="large"
              style="width: 100%; height: 48px"
              @click="register()"
            >
              注册
            </el-button>
            <div class="sub-link">
              <el-link type="primary" :underline="false" @click="getBack">
                重新登录
              </el-link>
            </div>
          </el-form>
          <!-- 忘记密码 -->
          <el-form
            v-if="registerForm.showss"
            ref="ruleFormRefs"
            :model="restets"
            :rules="registerRuless"
            class="login-form"
            auto-complete="on"
          >
            <div>
              <h3 class="title" style="text-align: center; margin: -20px 20px">
                {{ registerForm.forgetName }}
              </h3>
            </div>

            <div style="margin-top: 20px">
              <el-form-item prop="registerPhone">
                <el-input
                  v-model="restets.registerPhone"
                  placeholder="请输入手机号"
                  tabindex="1"
                  autocomplete="off"
                  :name="'random-' + Math.random()"
                >
                  <template #prefix>
                    <el-icon style="margin: 50px 10px; font-size: 24px">
                      <Iphone />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="verificationCode">
                <el-input
                  v-model="restets.verificationCode"
                  placeholder="请输入验证码"
                  tabindex="2"
                  autocomplete="off"
                  :name="'random-' + Math.random()"
                >
                  <template #prefix>
                    <el-icon style="margin: 50px 10px; font-size: 24px">
                      <Message />
                    </el-icon>
                  </template>
                  <template #suffix>
                    <el-button
                      class="login-btn"
                      :disabled="restets.showe"
                      v-if="!stateRevamp.countDownIng"
                      @click="countDownRevamp"
                      style="color: #0daeff; background-color: #fff"
                    >
                      获取验证码
                    </el-button>
                    <el-button
                      class="time-btn"
                      style="color: #ccc; background-color: #fff"
                      disabled
                      v-if="stateRevamp.countDownIng"
                      >{{ stateRevamp.countDownTime }}s</el-button
                    >
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="registerPassword">
                <el-input
                  v-model="restets.registerPassword"
                  type="password"
                  placeholder="密码"
                  tabindex="3"
                  minlength="6"
                  maxlength="15"
                  autocomplete="off"
                  :name="'random-' + Math.random()"
                  show-password
                >
                  <template #prefix>
                    <el-icon style="margin: 50px 10px; font-size: 24px">
                      <Lock />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="notarizePassword">
                <el-input
                  v-model="restets.notarizePassword"
                  type="password"
                  placeholder="确认密码"
                  tabindex="4"
                  minlength="6"
                  maxlength="15"
                  autocomplete="off"
                  :name="'random-' + Math.random()"
                  show-password
                >
                  <template #prefix>
                    <el-icon style="margin: 50px 10px; font-size: 24px">
                      <Lock />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </div>
            <el-button
              :loading="loading"
              type="primary"
              size="large"
              style="width: 100%; height: 48px"
              @click="registers()"
            >
              确定
            </el-button>
            <div class="sub-link">
              <el-link type="primary" :underline="false" @click="getBacks">
                返回
              </el-link>
            </div>
          </el-form>

          <!-- 微信登录 -->
          <div class="login-scan-container" v-if="registerForm.code">
            <div
              style="color: #5e6369; display: flex; margin-top: 20px"
              @click="goBack"
            >
              <div>
                <img
                  style="vertical-align: middle"
                  src="@/assets/Stroke.png"
                  alt=""
                />
                <span style="margin-left: 2px">返回</span>
              </div>
            </div>
            <div style="font-weight: 700; margin: 80px">微信扫码登录</div>
            <div>
              <div
                ref="qrcodeRef"
                style="
                  border: 1px solid #ccc;
                  width: 280px;
                  height: 280px;
                  margin: auto;
                  padding: 20px;
                "
              ></div>
            </div>

            <div class="font12 mt20 login-msg">
              <i class="iconfont icon-saoyisao mr5"></i>
              <span>
                <div class="sub-link">
                  <span class="text">还没有帐号?</span>
                  <el-link type="primary" :underline="false" @click="btnclick">
                    立即注册
                  </el-link>
                </div>
              </span>
            </div>
          </div>
        </div>

        <Copyright />
      </div>

      <div style=" color: #ccc; position: relative; top: 130px; margin: auto;'">
        <a style="color: #ccc" href="https://beian.miit.gov.cn/">
          粤ICP备00000000号
        </a>
        <div style="margin: 10px 0">
          Copyright
          <span
            style="
              display: inline-block;
              width: 20px;
              height: 20px;
              padding-bottom: 10px;
              border-radius: 50%;
              background-color: #f0f2f5;
              text-align: center;
              line-height: 100%;
            "
            >c</span
          >
          yundouping.com.AllRights.Reserved.
        </div>
        <div style="margin: 10px 0">v1.0.0</div>
      </div>
    </el-row>
  </el-scrollbar>
</template>

<script setup lang="ts" name="loginIndex">
// import wxlogin
import { onMounted, reactive, ref, inject, getCurrentInstance } from "vue";
import QRCode from "qrcodejs2-fixes";
import { storeToRefs } from "pinia";
import { useMainStore } from "@/store";
import { getPathAndName } from "../../utils/index";
const mainStore = useMainStore();
import { useWindowSize } from "@vueuse/core";
const { RouterList } = storeToRefs(mainStore);
const { width, height } = useWindowSize(); // 获取窗口宽度
import { NextLoading } from "@/utils/loading";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { User, Lock, Message, Iphone } from "@element-plus/icons-vue";
import {
  useLoginApi,
  sendNote,
  loginAccount,
  loginPhone,
  forgotPassword,
} from "@/api/login/index";
const jiami = inject("$jiami");
import { sysMenu } from "@/api/userManagement/index";

import { useRouter } from "vue-router";
import { overflow } from "html2canvas/dist/types/css/property-descriptors/overflow";
const activeName = ref("first");
const router = useRouter();
const loading = ref(false);

// 验证码登录
const resetForm = reactive({
  account: "", // 用户名
  captcha: "", // 短信
  newPassword: "", // 密码
  mobile: localStorage.getItem("name"), // 手机号
  wait: 60, // 倒计时
  showe: false,
});
// 忘记密码
const registerForm = reactive({
  account: "", // 用户名
  captcha: "", // 验证码
  password: "", // 密码
  checkPassword: "", // 确认密码
  wait: 60, // 倒计时
  show: false, // 是否禁用按钮默认为fasle
  shows: false, // 显示注册
  showss: false, // 显示忘记密码页面
  hide: true, // 登录与短信登录的显示隐藏
  code: false, // 二维码显示隐藏
  title: "登录",
  forgetName: "忘记密码",
});
// 注册
const restet = reactive({
  waits: 60, // 倒计时 注册
  showe: false, // 是否禁用按钮默认为fasle 注册
  registerPhone: localStorage.getItem("names"), // 注册时手机号
  verificationCode: "", // 注册时的验证码
  registerPassword: "", // 注册时的密码
  notarizePassword: "", // 确认密码
  note: "",
});
var showe = ref(false);
const restets = reactive({
  waits: 60, // 倒计时 注册
  showe: false, // 是否禁用按钮默认为fasle 注册
  registerPhone: localStorage.getItem("namesd"), // 注册时手机号
  verificationCode: "", // 注册时的验证码
  registerPassword: "", // 注册时的密码
  notarizePassword: "", // 确认密码
});
const loginForm = reactive({
  account: "",
  password: "",
  remember: !!localStorage.login_account,
});

const ruleFormRef = ref<FormInstance>();
const ruleFormRefs = ref<FormInstance>();
const resetFormRef = ref<FormInstance>();
const loginFormRef = ref<FormInstance>();
// 注册时候的表单校验
const registerRules = ref<FormRules>({
  registerPhone: [
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error("手机号不能为空"));
        }
        const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        // eslint-disable-next-line no-console
        if (!reg.test(restet.registerPhone)) {
          callback(new Error("输入的手机号不正确,请重新输入"));
        } else {
          callback();
        }
      },
    },
  ],
  verificationCode: [
    {
      validator: (rule, value, callback) => {
        // eslint-disable-next-line no-console
        if (!value) {
          callback(new Error("验证码不能为空"));
        } else {
          callback();
        }
      },
    },
  ],
  registerPassword: [
    {
      validator: (rule, value, callback) => {
        // eslint-disable-next-line no-console
        if (!value) {
          callback(new Error("密码不能为空"));
        } else {
          callback();
        }
      },
    },
    {
      min: 6,
      max: 18,
      trigger: "blur",
      message: "密码最少六位,数字+大小写字母",
    },
  ],
  notarizePassword: [
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error("确认密码不能为空"));
        }
        if (value !== restet.registerPassword) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      },
    },
  ],
});
// 忘记密码时候的表单验证
const registerRuless = ref<FormRules>({
  registerPhone: [
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error("手机号不能为空"));
        }
        const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        // eslint-disable-next-line no-console
        if (!reg.test(restets.registerPhone)) {
          callback(new Error("输入的手机号不正确,请重新输入"));
        } else {
          callback();
        }
      },
    },
  ],
  verificationCode: [
    {
      validator: (rule, value, callback) => {
        // eslint-disable-next-line no-console
        if (!value) {
          callback(new Error("验证码不能为空"));
        } else {
          callback();
        }
      },
    },
  ],
  registerPassword: [
    {
      validator: (rule, value, callback) => {
        // eslint-disable-next-line no-console
        if (!value) {
          callback(new Error("密码不能为空"));
        } else {
          callback();
        }
      },
    },
    {
      min: 6,
      max: 18,
      trigger: "blur",
      message: "密码最少六位,数字+大小写字母",
    },
  ],
  notarizePassword: [
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error("确认密码不能为空"));
        }
        if (value !== restets.registerPassword) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      },
    },
  ],
});
// 短信登录的表单验证
const resetRules = ref<FormRules>({
  mobile: [
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error("手机号不能为空"));
        }
        const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        // eslint-disable-next-line no-console
        if (!reg.test(resetForm.mobile)) {
          callback(new Error("输入的手机号不正确,请重新输入"));
        } else {
          callback();
        }
      },
    },
  ],
  captcha: [
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error("验证码不能为空"));
        }
        {
          callback();
        }
      },
    },
  ],
});
// 账号密码登录表单验证
const loginRules = ref<FormRules>({
  account: [
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error("用户名或手机号不能为空"));
        }
        {
          callback();
        }
      },
    },
  ],
  password: [
    {
      min: 6,
      max: 18,
      trigger: "blur",
      message: "密码最少六位,数字+大小写字母",
    },
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error("密码不能为空"));
        }
        {
          callback();
        }
      },
    },
  ],
});
const goBack = () => {
  registerForm.code = false;
  registerForm.hide = true;
};
const qrcodeRef = ref<HTMLElement | null>(null);
// 初始化生成二维码
const initQrcode = () => {
  (qrcodeRef.value as HTMLElement).innerHTML = "";
  new QRCode(qrcodeRef.value, {
    text: `https://open.weixin.qq.com/connect/qrconnect?
		appid=wx8dfcd1902cad0798&
		redirect_uri=645ecdbcfa4428319b47fcc274e06fac&
		response_type=code&
		scope=SCOPE&
		state=STATE#wechat_redirect`,
    width: 240,
    height: 240,
    colorDark: "#000000",
    colorLight: "#ffffff",
  });
};

const stateRegister = reactive({
  labelPosition: "top",
  formData: {
    phone: "",
    code: "",
  },

  // 短信倒计时
  countDownTime: 60,
  timer: null,
  countDownIng: false,
});
// 注册登录倒计时
const countDownRegister = () => {
  restet.note = "logon";

  const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
  if (reg.test(restet.registerPhone) == false) {
    ElMessage({
      message: "请输入正确的手机号再试",
      type: "error",
      duration: 1000,
    });
    return;
  } else if (reg.test(restet.registerPhone) == true) {
    localStorage.setItem("names", restet.registerPhone);
    // 发送验证码
    GetVerCodes();
    showe = true;
    let startTime = localStorage.getItem("startTimeLogins");
    let nowTime = new Date().getTime();
    if (startTime) {
      let surplus = 60 - parseInt((nowTime - startTime) / 1000, 10);
      stateRegister.countDownTime = surplus <= 0 ? 0 : surplus;
    } else {
      stateRegister.countDownTime = 60;
      localStorage.setItem("startTimeLogins", nowTime);
    }
    stateRegister.timer = setInterval(() => {
      stateRegister.countDownTime--;
      stateRegister.getCodeDisabled = true;
      stateRegister.countDownIng = true;
      if (stateRegister.countDownTime <= 0) {
        localStorage.removeItem("startTimeLogins");
        showe = false;
        clearInterval(stateRegister.timer);
        stateRegister.countDownTime = 60;
        stateRegister.countDownIng = false;
      }
    }, 1000);
  } else if (restet.registerPhone == "") {
    ElMessage("请输入手机号再试");
  }
};
const state = reactive({
  labelPosition: "top",
  formData: {
    phone: "",
    code: "",
  },

  // 短信倒计时
  countDownTime: 60,
  timer: null,
  countDownIng: false,
});
// 短信登录倒计时
const countDown = () => {
  restet.note = "login";

  const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
  if (reg.test(resetForm.mobile) == false) {
    ElMessage({
      message: "请输入正确的手机号再试",
      type: "error",
      duration: 1000,
    });
    return;
  } else if (reg.test(resetForm.mobile) == true) {
    localStorage.setItem("name", resetForm.mobile);
    // 发送验证码
    GetVerCode();
    registerForm.show = true;
    let startTime = localStorage.getItem("startTimeLogin");
    let nowTime = new Date().getTime();
    if (startTime) {
      let surplus = 60 - parseInt((nowTime - startTime) / 1000, 10);
      state.countDownTime = surplus <= 0 ? 0 : surplus;
    } else {
      state.countDownTime = 60;
      localStorage.setItem("startTimeLogin", nowTime);
    }
    state.timer = setInterval(() => {
      state.countDownTime--;
      state.getCodeDisabled = true;
      state.countDownIng = true;
      if (state.countDownTime <= 0) {
        localStorage.removeItem("startTimeLogin");
        registerForm.show = false;
        clearInterval(state.timer);
        state.countDownTime = 60;
        state.countDownIng = false;
      }
    }, 1000);
  } else if (resetForm.mobile == "") {
    ElMessage("请输入手机号再试");
  }
};
// 忘记密码倒计时
const stateRevamp = reactive({
  labelPosition: "top",
  formData: {
    phone: "",
    code: "",
  },
  // 短信倒计时
  countDownTime: 60,
  timer: null,
  countDownIng: false,
});
// 忘记密码倒计时
const countDownRevamp = () => {
  restet.note = "forgot";

  const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
  if (reg.test(restets.registerPhone) == false) {
    ElMessage({
      message: "请输入手机号再试",
      type: "error",
      duration: 1000,
    });

    return;
  } else if (reg.test(restets.registerPhone) == true) {
    localStorage.setItem("namesd", restets.registerPhone);
    // 发送验证码
    GetVerCoded();
    restets.showe = true;
    let startTime = localStorage.getItem("startTimeLoginsd");
    let nowTime = new Date().getTime();
    if (startTime) {
      let surplus = 60 - parseInt((nowTime - startTime) / 1000, 10);
      stateRevamp.countDownTime = surplus <= 0 ? 0 : surplus;
    } else {
      stateRevamp.countDownTime = 60;
      localStorage.setItem("startTimeLoginsd", nowTime);
    }
    stateRevamp.timer = setInterval(() => {
      stateRevamp.countDownTime--;
      stateRevamp.getCodeDisabled = true;
      stateRevamp.countDownIng = true;
      if (stateRevamp.countDownTime <= 0) {
        localStorage.removeItem("startTimeLoginsd");
        restets.showe = false;
        clearInterval(stateRevamp.timer);
        stateRevamp.countDownTime = 60;
        stateRevamp.countDownIng = false;
      }
    }, 1000);
  } else if (restets.registerPhone == "") {
    ElMessage({
      message: "请输入手机号再试",
      type: "error",
      duration: 1000,
    });
  }
};
// 账号密码登录
// eslint-disable-next-line require-await
const { proxy }: any = getCurrentInstance();
const login = async () => {
  loginFormRef.value?.validate(async (valid) => {
    if (valid) {
      const data = {
        account: loginForm.account,
        linkSystem: "xinfa",
        password: proxy.$jiami(loginForm.password),
        loginType: "pc",
      };
      const res = await loginAccount(data);
      // eslint-disable-next-line eqeqeq
      if (res.data.code == 1) {
        localStorage.setItem("token", res.data.data.token);
        localStorage.setItem("userInfo", res.data.data.account);
        let datas = {
          linkSystem: "xinfa",
          account: res.data.data.account,
        };
        // window.location.reload();
        let result = await sysMenu(datas);
        RouterList.value = result.data.data;
        // 拿到第一个的path和name
        localStorage.setItem("path", getPathAndName(result.data.data[0]).path);
        localStorage.setItem(
          "pathName",
          getPathAndName(result.data.data[0]).name
        );

        ElMessage({
          message: res.data.msg,
          type: "success",
          duration: 1000,
        });
        router.replace(getPathAndName(result.data.data[0]).path);
      } else {
        ElMessage({
          message: res.data.msg,
          type: "error",
          duration: 1000,
        });
      }
    }
  });
};
// 验证码登录
// eslint-disable-next-line require-await
const notarize = async () => {
  resetFormRef.value?.validate(async (valid) => {
    if (valid) {
      const data = {
        code: resetForm.captcha,
        linkSystem: "xinfa",
        phone: resetForm.mobile,
        loginType: "pc",
      };
      const res = await loginPhone(data);
      // eslint-disable-next-line eqeqeq
      if (res.data.code == 1) {
        localStorage.setItem("token", res.data.data.token);
        localStorage.setItem("userInfo", res.data.data.account);
        localStorage.removeItem("startTimeLogin");
        let datas = {
          linkSystem: "xinfa",
          account: res.data.data.account,
        };
        window.location.reload();
        let result = await sysMenu(datas);
        RouterList.value = result.data.data;
        ElMessage({
          message: res.data.msg,
          type: "success",
          duration: 1000,
        });
        router.replace("/index/home");
      } else {
        ElMessage({
          message: res.data.msg,
          type: "error",
          duration: 1000,
        });
      }
    }
  });
};
//
// 手机号注册
// eslint-disable-next-line require-await
const register = async () => {
  ruleFormRef.value?.validate(async (valid) => {
    if (valid) {
      const data = {
        code: restet.verificationCode,
        linkSystem: "xinfa",
        password: proxy.$jiami(restet.registerPassword),
        phone: restet.registerPhone,
      };
      const res = await useLoginApi(data);
      // eslint-disable-next-line no-console, eqeqeq
      if (res.data.code == 1) {
        ElMessage({
          message: res.data.msg,
          type: "success",
          duration: 1000,
        });
        registerForm.hide = true;
        registerForm.shows = false;
      } else {
        ElMessage({
          message: res.data.msg,
          type: "error",
          duration: 1000,
        });
      }
    }
    // eslint-disable-next-line no-console
  });
};
// 忘记密码
// eslint-disable-next-line require-await
const registers = async () => {
  restet.note = "forgot";
  ruleFormRefs.value?.validate(async (valid) => {
    if (valid) {
      const data = {
        code: restets.verificationCode,
        linkSystem: "xinfa",
        password: proxy.$jiami(restets.registerPassword),
        phone: restets.registerPhone,
      };
      const res = await forgotPassword(data);
      // eslint-disable-next-line no-console
      if (res.data.code === 1) {
        ElMessage({
          message: res.data.msg,
          type: "success",
          duration: 1000,
        });
        registerForm.hide = true;
        registerForm.showss = false;
      } else {
        ElMessage({
          message: res.data.msg,
          type: "error",
          duration: 1000,
        });
      }
    }
    // eslint-disable-next-line no-console
  });
};
// 获取发送验证码-验证码登录
let timer: any = null;
const VerCode = () => {
  if (!timer) {
    if (resetForm.mobile !== "") {
      GetVerCode();
      registerForm.show = true;
      Time();
      timer = setTimeout(() => {
        clearTimeout(timer);
        timer = null;
        registerForm.show = false;
      }, 60000);
    } else {
      ElMessage("请输入手机号再试！");
    }
  }
};
// 忘记密码
const GetVerCoded = async () => {
  const data = {
    messageType: restet.note,
    phone: restets.registerPhone,
  };
  const res = await sendNote(data);
  if (res.data.code === 1) {
    ElMessage({
      message: res.data.msg,
      type: "success",
      duration: 1000,
    });
    Time();
  }
};
// 注册发送短信
const GetVerCodes = async () => {
  const data = {
    messageType: restet.note,
    phone: restet.registerPhone,
  };

  const res = await sendNote(data);
  if (res.data.code === 1) {
    Time();
    ElMessage({
      message: res.data.msg,
      type: "success",
      duration: 1000,
    });
  }
};
// 验证码登录发送短信
const GetVerCode = async () => {
  const data = {
    messageType: restet.note,
    phone: resetForm.mobile,
  };

  const res = await sendNote(data);
  if (res.data.code === 1) {
    ElMessage({
      message: res.data.msg,
      type: "success",
      duration: 1000,
    });
    Time();
  }
};

const forget = () => {
  registerForm.hide = false;
  registerForm.showss = true;
};
const getBacks = () => {
  registerForm.showss = false;
  registerForm.hide = true;
};
const wechatClick = () => {
  registerForm.code = true;
  registerForm.hide = false;
};
const getBack = () => {
  registerForm.hide = true;
  registerForm.shows = false;
  if (registerForm.hide) {
    registerForm.title = "登录";
  } else {
    registerForm.title = "注册";
  }
};
const btnclick = () => {
  registerForm.shows = true;
  registerForm.hide = false;
  if (registerForm.shows) {
    registerForm.title = "注册用户";
  } else {
    registerForm.title = "登录";
  }
};
const handleLogin = () => {};
// 页面加载时
onMounted(() => {
  NextLoading.done();
  let sendEndTime = localStorage.getItem("startTimeLogin");
  if (sendEndTime) {
    state.countDownIng = true;
    countDown();
  }
  if (localStorage.getItem("name")) {
    resetForm.mobile = localStorage.getItem("name");
  }
  //   注册倒计时
  let sendEndTimes = localStorage.getItem("startTimeLogins");
  if (sendEndTimes) {
    stateRegister.countDownIng = true;
    countDownRegister();
  }

  if (localStorage.getItem("names")) {
    restet.registerPhone = localStorage.getItem("names");
  }
  //   忘记密码倒计时
  //   注册倒计时
  let sendEndTimesd = localStorage.getItem("startTimeLoginsd");
  if (sendEndTimesd) {
    stateRevamp.countDownIng = true;
    countDownRevamp();
  }

  if (localStorage.getItem("namesd")) {
    restets.registerPhone = localStorage.getItem("namesd");
  }
});
</script>

<style scoped lang="scss">
.back {
  background-image: url("../../assets/Group.png");
  height: 100vh;
}
// 改变inout输入框自动填充时候的背景颜色
:deep(.el-input__inner) {
  -webkit-text-fill-color: #303133; //文字颜色
  caret-color: #303133; //光标颜色
  box-shadow: inset 0 0 0 1000px #ffff !important; //背景颜色
}

:deep(input::-webkit-input-placeholder) {
  -webkit-text-fill-color: #5f757f !important; //placeholder的文字颜色
}

::v-deep .el-input-group__append {
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: none;
}
::v-deep .el-input-group__append,
.el-input-group__prepend {
  background-color: #ffff;
  color: #79bbff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  border-radius: var(--el-input-border-radius);
  padding: 0 20px;
  white-space: nowrap;
}
.login-btn {
  width: 100%;
  height: 100%;
  border: none;
  border-top-left-radius: none;
  background-color: #fff;
  border: none;
  cursor: pointer;
}
::v-deep .el-form-item__content {
  // border:none
}
::v-deep .el-form-item__content .el-input-group {
  vertical-align: top;
  // border: 1px solid #ccc;
}
.time-btn {
  width: 100%;
  height: 100%;
  border-top-left-radius: none;
  color: #ccc;
  border: none;
  background-color: #fff;
  cursor: pointer;
}
// ::v-deep .el-input {
//     --el-input-text-color: var(--el-text-color-regular);
//     --el-input-border: var(--el-border);
//     --el-input-hover-border: var(--el-border-color-hover);
//     --el-input-focus-border: var(--el-color-primary);
//     --el-input-transparent-border: 0 0 0 1px transparent inset;
//     --el-input-border-color: var(--el-border-color);
//     --el-input-border-radius: var(--el-border-radius-base);
//     --el-input-bg-color: var(--el-fill-color-blank);
//     --el-input-icon-color: var(--el-text-color-placeholder);
//     --el-input-placeholder-color: var(--el-text-color-placeholder);
//     --el-input-hover-border-color: var(--el-border-color-hover);
//     --el-input-clear-hover-color: var(--el-text-color-secondary);
//      --el-input-focus-border-color: none;
// }
::v-deep .el-input .el-input__icon {
  height: inherit;
  line-height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all var(--el-transition-duration);
  margin-left: 0px;
}
::v-deep .el-input__wrapper {
  display: inline-flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  padding: none;
  background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
  background-image: none;
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  transition: var(--el-transition-box-shadow);
  transform: translate3d(0, 0, 0);
}
el-form-item.is-error .el-input__wrapper {
  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
}
.time-btn {
  .el-input__wrapper {
    display: inline-flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    padding: 1px 11px;
    background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
    background-image: none;
    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
    transition: var(--el-transition-box-shadow);
    transform: translate3d(0, 0, 0);
    box-shadow: none;
  }
}
.login-btn {
  .el-input__wrapper {
    display: inline-flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    padding: 1px 11px;
    background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
    background-image: none;
    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
    transition: var(--el-transition-box-shadow);
    transform: translate3d(0, 0, 0);
    box-shadow: none;
  }
}

.login-scan-animation {
  opacity: 0;
  animation-name: error-num;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  width: 506px;
}

.login-scan-container {
  padding: 0 20px 52px;
  display: flex;
  flex-direction: column;
  text-align: center;
  @extend .login-scan-animation;
  animation-delay: 0.1s;

  :deep(img) {
    margin: auto;
  }

  .login-msg {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #409eff;
    @extend .login-scan-animation;
    animation-delay: 0.2s;
  }
}

.icon {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .img-icon {
    display: flex;
    align-items: center;

    .img-dex {
      // margin: 0 10px;
      border: 1px solid #e5e6eb;
      border-radius: 50%;
      // text-align: center;
      // line-height: 40px;
      width: 50px;
      height: 50px;
    }

    img {
      width: 40px;
      height: 40px;
    }
  }
}

.top {
  width: 100%;
  height: 72px;
  background: #ffffff;
  display: flex;
  align-items: center;

  .top-box {
    margin: 0 5%;
    width: 100%;
    display: flex;
    align-items: center;
  }

  .top-img {
    height: 40px;
    visibility: visible;
  }

  .top-text {
    font-weight: 700;
    margin-left: 5px;
  }
}

::v-deep .el-tabs__nav {
  display: flex;
  white-space: nowrap;
  position: relative;
  transition: transform var(--el-transition-duration);
  float: none;
  z-index: calc(var(--el-index-normal) + 1);
  justify-content: space-evenly;
  align-items: flex-end;
  align-content: space-between;
}

.logo {
  // text-align: center;
  display: flex;
  // align-items: center;
  justify-items: center;
  border: 5px solid #0000;
}

.img-text {
  font-weight: 500;
  font-size: 24px;
  line-height: 34px;
}

.login-left-logo-text-msg {
  font-size: 16px;
  line-height: 22px;
  margin-top: 10px;
}

.login-left-logo {
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box-text {
  color: #ffffff;
  margin: 20px 60px;
}

[data-mode="mobile"] {
  #login-box {
    position: relative;
    width: 100%;
    height: 100%;
    top: inherit;
    left: inherit;
    transform: translateX(0) translateY(0);
    flex-direction: column;
    justify-content: start;
    border-radius: 0;
    box-shadow: none;

    .login-banner {
      width: 100%;
      padding: 20px 0;

      .banner {
        position: relative;
        right: inherit;
        width: 100%;
        max-width: 375px;
        height: 506px;

        margin: 0 auto;
        display: inherit;
        top: inherit;
        transform: translateY(0);
      }
    }

    .login-form {
      width: 100%;
      min-height: auto;
      padding: 30px;
    }
  }

  .copyright {
    position: relative;
    bottom: 0;
    padding-bottom: 10px;
  }
}

// :deep(input[type='password']::-ms-reveal) {
// 	display: none;
// }

.bg-banner {
  // position: fixed;
  // z-index: 0;
  // width: 100%;
  // height: 506px;

  // background: radial-gradient(
  //   circle at center,
  //   var(--el-fill-color-lighter),
  //   var(--el-bg-color-page)
  // );
}
// 输入框里有文字我们用鼠标选中时候的颜色
::v-deep .el-input input::selection {
  background-color: #79bbff;
}
#login-box {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-color: var(--el-bg-color);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--el-box-shadow);
  height: 506px;

  .login-banner {
    position: relative;
    width: 450px;
    background: #0daeff;
    overflow: hidden;
    min-height: 506px;
    // 	display: flex;
    // align-items: center;
    // justify-content: space-around;
    .banner {
      width: 100%;

      //   @include position-center(y);
    }

    .logo {
      position: absolute;
      top: 20px;
      left: 20px;
      width: 30px;
      height: 30px;
      border-radius: 4px;
      background-size: contain;
      box-shadow: var(--el-box-shadow-light);
    }
  }

  .login-form {
    display: flex;
    flex-direction: column;
    // justify-content: center;
    min-height: 500px;
    width: 500px;
    padding: 50px;
    overflow: hidden;

    .title-container {
      position: relative;

      .title {
        font-size: 1.3em;
        color: var(--el-text-color-primary);
        margin: 0 auto 30px;
        font-weight: bold;
        text-align: center;
      }
    }
  }
  .el-form-item {
    margin-bottom: 24px;
    :deep(.el-input) {
      height: 48px;
      line-height: inherit;
      width: 100%;
      // border: 1px solid #ccc;
      input {
        // height: 48px;
      }
      .el-input {
        // border: 1px solid #ccc;
      }
      .el-input__prefix,
      .el-input__suffix {
        display: flex;
        align-items: center;
      }

      .el-input__prefix {
        left: 10px;
      }

      .el-input__suffix {
        right: 10px;
      }
    }
  }

  .flex-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .sub-links {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--el-text-color-secondary);
    cursor: pointer;
    margin: 0 13px;
  }
  .sub-link {
    display: flex;
    align-items: center;
    // justify-content: center;
    margin-top: 30px;
    font-size: 14px;
    color: var(--el-text-color-secondary);

    .text {
      margin-right: 10px;
    }
  }
}

.copyright {
  position: absolute;
  bottom: 30px;
  width: 100%;
  margin: 0;
}
::v-deep #login-box .el-form-item .el-input {
  height: 48px;
  line-height: inherit;
  width: 100%;
  // border: 1px solid #ccc !important;
}
</style>
